<template>
	<view class="content">
		<view class="search">
			<uni-search-bar @confirm="search" @input="input" placeholder="请输入关键字"></uni-search-bar>
		</view>
		<view class="container">
			<view class="title">推荐衣服</view>
			<view class="pic_list">
				<view class="pic_list_item" v-for="(item,index) in imgUrlArr" :key="index">
					<image :src=" baseUrl + item.mimgUrl " mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: '',
				imgUrlArr: []
			}
		},
		onLoad() {
			this.baseUrl = this.$api.SERVER_BASE;
			this.getAllImg()
		},
		methods: {

			//监听输入框的变化
			input() {
				console.log(111)
			},

			//输入完毕之后，按确定按钮后，执行的方法
			search(e) {
				console.log(e)
			},

			//分页查询所有图片
			getAllImg() {
				this.$post(this.$api.POST_PAGINATION_QUERY_ALL_IMG, {
					current: '1',
					id: '666666',
					size: '100'
				}).then(res => {
					//接口请求成功，返回分页查询的所有图片
					//console.log(res)
					if (res.succeed) {
						this.imgUrlArr = res.content.records;
					} else {
						//接口请求失败
						uni.showToast({
							title: '接口请求失败',
							icon: 'error'
						})
					}
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 750rpx;
		height: 750rpx;

		.search {
			width: 100%;
		}

		.container {
			width: 100%;
			position: absolute;
			padding-bottom: 200px;

			.title {
				height: 50px;
				line-height: 50px;
				text-align: center;
				letter-spacing: 20px;
				margin: 7rpx 0;
				color: #ff6f0f;
				background-color: #c9dde7;
			}

			.pic_list {
				column-count: 2;
				column-gap: 3rpx;
				width: 100%;

				.pic_list_item {
					break-inside: avoid;
					border-radius: 10rpx;
					background: #FFFFFF;
					padding: 10rpx;
					border-radius: 3rpx;
					width: 100%;
					height: auto;
					margin: 10rpx 0;
					box-sizing: border-box;
					
					image {
						border-radius: 10rpx;
						width: 100%;
					}
				}
			}
		}
	}
</style>
